<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css" />
		<link rel="stylesheet" href="css/dashboard.css">
		<!--[if lt IE 9]>
	    <script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
	    <![endif]-->
	    <style>
	    	 html,body{
	    		background-color: #f6f7fb;
	    		height: 100% !important;
	    		width: 100%;
	    		overflow: hidden;
	    		padding-top: 0 !important;
	    	}
	    	#app{
	    		height: 100%;
	    	}
	    	.el-carousel{
	    		height: 100%;
	    	}
	    	.content{
	    		width: 950px;
	    		position: absolute;
	    		margin-left: -425px;
	    		left: 50%;
	    		top: 66px;
	    		height: 600px;
	    		background: white;
	    		border-radius:6px ;
	    		box-shadow: 0 0 100px rgba(0,0,0,0.2);
	    		z-index: 100;
	    		overflow: hidden;
	    	}
	    	.login-bg{
	    		width: 920px;
	    		position: absolute;
	    		z-index: 1;
	    		right: 540px;
	    		top: 60px;
	    	}
	    	.login-left{
	    		width: 440px;
	    		float: left;
	    		padding: 60px 60px;
	    		position: relative;
	    	}
	    	.login-tit{
	    		width: 170px;
	    		margin-top: 20px;
	    		display: block;
	    	}
	    	.login-right{
	    		width: 510px;
	    		float: left;
	    		height: 100%;
	    		background-color: #323232;
	    	}
	    	.login-right img{
	    		width: 100%;
	    	}
	    	.shuru{
	    		margin-top: 80px;
	    	}
	    	.bottomtxt{
	    		margin-top: 90px;
	    		color: #333;
	    		text-align: center;
	    	}
	    	.cricle{
	    		display: block;
	    		position: absolute;
	    		width: 36px;
	    		height: 36px;
	    		border-radius: 50%;
	    		border: 10px solid #fd6481;
	    		top: 140px;
	    		right: 88px;
	    	}
	    	.el-carousel__container{
	    		height: 94%;
	    	}
	    	 .el-carousel__item h3 {
			    color: #475669;
			    font-size: 18px;
			    opacity: 0.75;
			    line-height: 300px;
			    margin: 0;
			  }
			  
			  .el-carousel__item:nth-child(2n) {
			    background-color: #99a9bf;
			  }
			  
			  .el-carousel__item:nth-child(2n+1) {
			    background-color: #d3dce6;
			  }
			  .login-bgs{
			  	height: 100%;
			  	width: 100%;
			  }
			  .timg{
			  	height: 100%;
			  	width: 100%;
			  	opacity: 0.6;
			  }
	    </style>
	</head>

	<body >
		<div id="app">
			<div class="login-bgs">
				<el-carousel indicator-position="outside">
				    <el-carousel-item v-for="item in imagesd">
				     <!-- <img class="timg" :src="item">-->
				    </el-carousel-item>
				  </el-carousel>
			</div>
		<!--<img class="login-bg" src="images/bigdata.png" />-->
		<div class="content">
			<div class="login-left">
				<img class="login-tit" src="images/tittle.png" />
				<div class="shuru">
				<el-form ref="params" :model="params" :rules="rules">
							<!--用户名-->
							<el-form-item prop="loginName">
								<el-input placeholder="输入手机号/用户名" v-model="params.loginName" size="large">
									<template slot="prepend"><i class="fa fa-user fa-fw"></i></template>
								</el-input>
							</el-form-item>
							<!--密码-->
							<el-form-item prop="loginSecret">
								<el-input placeholder="请输入密码" type="password" size="large" v-model="params.loginSecret">
									<template slot="prepend"><i class="fa fa-lock fa-fw"></i></template>
								</el-input>
							</el-form-item>
							<!--记住账号，默认不勾选-->
							<div>
								<el-checkbox v-model="isSaveAccount">记住账号</el-checkbox>
								<a href="#" class="pull-right text-muted">忘记密码？</a>
							</div>
							<!--登录按钮-->
							<el-form-item>
								<el-button size="large" type="primary" style="width: 100%;margin-top: 10px;" @click="submitForm('params')" :loading="isSubmiting">登陆</el-button>
							</el-form-item>
							
						</el-form>
				</div>
				<div class="bottomtxt">
					专业电商大数据管理平台
				</div>
				<span class="cricle"></span>
			</div>
			<div class="login-right">
				<img src="images/rights.png" />
			</div>
			
		</div>
		
		</div>

		
	</body>
		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="js/ie10-viewport-bug-workaround.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script src="plugins/element-ui/index.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					//登录接口参数
					params: {
						loginName: '',
						loginSecret: ''
					},
					imagesd:[
					'images/bg1.jpg',
					'images/bg1.jpg',
					'images/bg1.jpg'
					],
					userData:{},
					//表单验证规则
					rules: {
						loginName: [{
							required: true,
							message: '请输入手机号码或用户名',
							trigger: 'blur'
						}],
						loginSecret: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}]
					},
					//是否保存账号
					isSaveAccount: false,
					//登录按钮状态变化
					isSubmiting: false,
					//跳转保留
					redirect: null
				},
				computed: {

				},
				mounted: function() {

				},
				methods: {
					submitForm:function(formName) {
						this.isSubmiting = true;
						var vm = this;
							$.ajax({
								type:"get",
								url:"auth/login/",
								async:true,
								data:vm.params,
								success: function(data) {
									vm.userData = data;
									vm.isSubmiting = false;
									console.log(data)
								},
								error: function(err) {
									console.log(err);
								}
							});
					}

				}
			});
	</script>
</html>